import React from 'react';
import { Form } from 'antd';
import Icon from '@/molecules/IconSelector/Icon';
import { TreeSelectGroup } from '../index';
import GroupLabel from '../GroupLabel';
import 'antd/dist/antd.css';
import '../../../assets/oaicons/iconfont.css';

const data = [
    {
        id: '0-0',
        title: '管理类'
    },
    {
        id: '0-0-1',
        value: '0-0-1',
        pId: '0-0',
        title: '高层管理模板'
    },
    {
        id: '0-0-2',
        value: '0-0-2',
        pId: '0-0',
        title: '普通管理模板'
    },
    {
        id: '0-0-3',
        value: '0-0-3',
        pId: '0-0',
        title: '普通管理模板2'
    },
    {
        id: '0-1',
        value: '0-1',
        title: '人事类'
    },
    {
        id: '0-1-1',
        value: '0-1-1',
        pId: '0-1',
        title: '行政模板'
    },
    {
        id: '0-1-2',
        value: '0-1-2',
        pId: '0-1',
        title: '招聘模板'
    }
];

const Basic = ({ form }) => {
    const { getFieldDecorator } = form;
    return (
        <Form>
            <Form.Item label="TreeSelectGroup">
                {getFieldDecorator('test', {
                    initialValue: ['0-0-1', '0-1-2']
                })(<TreeSelectGroup disabled data={data} />)}
            </Form.Item>
            <Form.Item label="TreeSelectGroupLabel">
                <GroupLabel
                    title="这是标题"
                    data={data}
                    value={['0-0-1', '0-0-2', '0-0-3', '0-1-2']}
                    renderPopupValueItem={item => (
                        <>
                            {item.icon && (
                                <Icon
                                    style={{
                                        display: 'inline-block',
                                        width: '20px',
                                        height: '20px',
                                        lineHeight: '20px',
                                        fontSize: '12px',
                                        textAlign: 'center',
                                        marginRight: '4px'
                                    }}
                                    iconfontClassName="iconfont"
                                    icon={item.icon}
                                />
                            )}
                            {item.title}
                        </>
                    )}
                />
            </Form.Item>
            <Form.Item label="TreeSelectGroupLabel2">
                <GroupLabel
                    title="这是标题"
                    data={data}
                    value={['0-0-1', '0-0-2', '0-0-3', '0-1-2']}
                    renderPopupValueItem={item => (
                        <>
                            {item.icon && (
                                <Icon
                                    style={{
                                        display: 'inline-block',
                                        width: '20px',
                                        height: '20px',
                                        lineHeight: '20px',
                                        fontSize: '12px',
                                        textAlign: 'center',
                                        marginRight: '4px'
                                    }}
                                    iconfontClassName="iconfont"
                                    icon={item.icon}
                                />
                            )}
                            {item.title}
                        </>
                    )}
                    renderTag={value => <span style={{ cursor: 'default' }}>{value.length}</span>}
                />
            </Form.Item>
        </Form>
    );
};

export default Form.create()(Basic);
